<template>
<!--歌单推荐-->
  <div class="div1">
    <navClider :navText="text" v-on:handover="get"/>
    <div v-if="info" class="show">
      <ul>
        <li v-for="(val,index) in info" :key="index"><showSongs :songsInfo='val'/></li>
      </ul>
      
    </div>
  </div>
</template>

<script>
import require from "requests/recommend";
import showSongs from '@/components/homeCom/showSongs'
import navClider from "@/components/homeCom/navClider";
export default {
  name: "div1",
  data() {
    return {
      text: ["为你推荐", "华语", "流行", "古风", "欧美"],
      info:null
    };
  },
  components: {
    navClider,
    showSongs
  },
  methods: {
    get(val) {
      var value;
      val == 0 ? (value = "") : (value = this.text[val]);
      this.getSongs(value);
    },
    getSongs(value) {
      require.getSongs(value).then(res => {
        this.info=res.data.playlists
        //console.log(this.info)
      });
    }
  },
  mounted() {
    this.getSongs()
  }
};
</script>

<style lang="less" scoped>
.div1{
  .show{
    ul{
      padding: 0;
      display: flex;
      justify-content:space-around ;
    }
  }
}
</style>